<template>
  <div
    v-if="showModal"
    class="overDiv"
  >
    <div
      v-if="!showReasonModal"
      class="cancelModal"
    >
      <div class="header">
        <div class="title" />
        <div
          class="colse"
          @click="closeModal"
        >
          <img
            src="../../assets/img/close.png"
            alt=""
          >
        </div>
      </div>
      <div class="body">
        {{ content }}
      </div>
      <div class="footer">
        <div
          class="yes"
          @click="cancelOrder"
        >
          是
        </div>
        <div
          class="no"
          @click="closeModal"
        >
          否
        </div>
      </div>
    </div>
    <div
      v-if="showReasonModal"
      class="cancelModal2"
    >
      <div class="header">
        <div class="title">
          申请取消订单
        </div>
        <div
          class="colse"
          @click="closeModal"
        />
      </div>
      <div class="body">
        <el-form
          :inline="true"
          :model="formInline"
          :label-position="labelPosition"
          label-width="100px"
          class="demo-form-inline"
        >
          <el-form-item label="取消原因">
            <el-select
              v-model="value"
              placeholder="请选择"
              @change="selectReason"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                v-model="item.id"
                :label="item.reason"
                style="width: 16.69rem; height: 2.44rem; border-radius: 0"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="tips">
          <div>订单取消后:</div>
          <ul>
            <li>此订单所使用的优惠券会退回（新用户券失效）</li>
            <li>此订单使用礼品卡支付的金额退回到礼品卡</li>
            <li>此订单参加满减券活动所送优惠券失效</li>
            <li>此订单获得的成长值会被扣除</li>
            <li>
              若随单成功开通超级会员,则退款金额中不包含超级会员实际开卡费,若有问题请联系客服
            </li>
          </ul>
        </div>
      </div>
      <div class="footer">
        <div
          class="yes"
          @click="confirmCancelOrder"
        >
          提交申请
        </div>
        <div
          class="no"
          @click="closeModal"
        >
          暂不取消
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // props: ['showModal'],
  data() {
    return {
      labelPosition: "left",
      formInline: {
        reason: "",
      },
      options: [],
      value: "",
      showReasonModal: false,
      showModal: false,
      flag: "",
      cancelReason: "",
      currentItem: {},
      content: "",
      status: "",
      TYPE: "",
    };
  },
  methods: {
    //确认取消订单
    cancelOrder() {
      //把点击确定的数据传到父组件
      if (this.flag == "cancel") {
        console.log("cancel");

        this.showReasonModal = true;
        // 获取取消订单原因接口
        let params = {
          token: localStorage.getItem("token"),
        };
        this.$api.person.getReasonContentList(params).then((res) => {
          if (res.code == 200) {
            this.options = res.data;
          }
        });
      } else if (this.flag == "delete") {
        console.log("delete", this.currentItem, this.TYPE);
        if (this.TYPE === "good") {
          // 删除购车商品
          let item = this.currentItem;
          let params = {
            token: localStorage.getItem("token"),
            data: {
             items: item 
            }
          };
          this.$api.good.delCarts(params).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.$emit("refresh", this.status);
              this.closeModal();
            }
          });
        } else if (this.TYPE == "address") {
          //删除收货地址
          let item = this.currentItem;
          let params = {
            token: localStorage.getItem("token"),
            data: item,
          };
          this.$api.person.deleteAddress(params).then((res) => {
            console.log("qqq", res, this.status);
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.$emit("refresh", this.status);
              this.closeModal();
            }
          });
        } else {
          // 删除订单
          let item = this.currentItem;
          let params = {
            token: localStorage.getItem("token"),
            data: {
              orderIds: item.id,
            },
          };
          this.$api.person.delUserOrders(params).then((res) => {
            console.log("qqq", res, this.status);
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.$emit("refresh", this.status);
              this.closeModal();
            }
          });
        }
      } else if (this.flag == "ConfirmGoods") {
        let item = this.currentItem;
        let params = {
          token: localStorage.getItem("token"),
          data: {
            cOrderNo: item.cOrderNo,
          },
        };
        this.$api.person.batchConfirmTake(params).then((res) => {
          console.log("qqq", res, this.status);
          if (res.code == 200) {
            this.$message.success("确认收货成功");
            this.$emit("refresh", this.status);
            this.closeModal();
          } else {
            this.$message.error(res.message)
          }
        });
      } else if (this.flag == "CancelRefund") {
        let item = this.currentItem;
        let params = {
          token: localStorage.getItem("token"),
          data: {
            cSaleReturnNo: item.cSaleReturnNo,
          },
        };
        console.log("params", params);
        this.$api.person.cancelSaleReturnAPI(params).then((res) => {
          console.log("取消退款", res, this.status);
          if (res.code == 200) {
            this.$message.success("取消退款成功");
            this.$emit("refresh", this.status);
            this.closeModal();
          } else {
            this.$message.error(res.message);
            this.$emit("refresh", this.status);
            this.closeModal();
          }
        });
      }
    },
    //取消订单 提交原因
    confirmCancelOrder() {
      if (this.cancelReason == "") {
        this.$message.error("请选择取消订单的原因");
        return false;
      } else {
        let item = this.currentItem;
        let params = {
          token: localStorage.getItem("token"),
          data: {
            cOrderNo: item.cOrderNo,
            reason: this.cancelReason,
          },
        };
        this.$api.person.closeOrder(params).then((res) => {
          if (res.code == 200) {
            this.$message.success("取消订单成功");
            this.$emit("refresh", this.status);
            this.closeModal();
          }
        });
      }
    },
    //关闭弹窗
    closeModal() {
      this.showModal = false;
      this.showReasonModal = false;
    },
    //打开弹窗
    showM(flag, type = null) {
      this.showModal = true;
      this.flag = flag;
      if (flag == "delete") {
        if (type == "good") {
          this.TYPE = "good";
          this.$nextTick(function () {
            this.content = "确定删除该商品吗?";
          });
        } else if (type == "order") {
          this.TYPE = "order";
          this.$nextTick(function () {
            this.content = "确定删除该订单吗?";
          });
        } else if (type == "address") {
          this.TYPE = "address";
          this.$nextTick(function () {
            this.content = "确定删除该地址吗?";
          });
        }
      } else if (flag == "cancel") {
        this.TYPE = "cancel";
        this.$nextTick(function () {
          this.content = "确定取消该订单吗?";
        });
      } else if (flag == "ConfirmGoods") {
        this.TYPE = "ConfirmGoods";
        this.$nextTick(function () {
          this.content = "确定您已收到货了吗?";
        });
      } else if (flag == "CancelRefund") {
        this.TYPE = "CancelRefund";
        this.$nextTick(function () {
          this.content = "确定取消退款吗?";
        });
      }
    },
    //获取当前item
    getItem(item) {
      this.currentItem = item;
    },
    //获取当前状态
    newStatus(status) {
      this.status = status;
    },
    //选择原因
    selectReason(e) {
      console.log(e);
      this.options.forEach((item) => {
        if (item.id == e) {
          this.cancelReason = item.reason;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.overDiv {
  .cancelModal2 {
    form {
      width: 23.6rem;
      margin: 0 auto;

      .el-form-item {
        margin-bottom: 0;
      }
    }

    .el-form-item__label {
      font-size: 1rem !important;
    }
  }
}
</style>
<style scoped lang="scss">
.overDiv {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);

  .cancelModal2 {
    position: absolute;
    height: 31.69rem;
    width: 39rem;
    padding: 1.25rem;
    left: 50%;
    margin-left: -16.5rem;
    top: 50%;
    margin-top: -9.5rem;
    background: rgba(255, 255, 255, 1);
    z-index: 1001;

    .header {
      padding-top: 3.25rem;
      padding-left: 3.38rem;

      .title {
        font-size: 1.13rem;
        color: #333;
      }
    }

    .body {
      display: flex;
      flex-direction: column;
      padding-top: 3.56rem;

      .tips {
        width: 26rem;
        height: 9.19rem;
        font-size: 1rem;
        margin: 2rem auto 2.69rem auto;
        padding-left: 2rem;

        > div {
          line-height: 2rem;
        }

        ul {
          li {
            list-style: disc;
            font-size: 0.88rem;
            font-weight: 400;
            color: rgba(51, 51, 51, 1);
            line-height: 1.38rem;
          }
        }
      }
    }

    .footer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      text-align: center;
      line-height: 2.56rem;

      .yes {
        width: 9.5rem;
        height: 2.5rem;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        margin-right: 5.69rem;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }

      .no {
        width: 9.5rem;
        height: 2.5rem;
        background: rgba(255, 255, 255, 1);
        color: #333;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .cancelModal {
    position: absolute;
    height: 19rem;
    width: 33.19rem;
    padding: 1.25rem;
    left: 50%;
    margin-left: -16.5rem;
    top: 50%;
    margin-top: -9.5rem;
    background: rgba(255, 255, 255, 1);
    z-index: 1001;

    .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .titles {
        font-size: 1.13rem;
        color: #666666;
        padding: 0.4rem 0 0 0.5rem;
      }

      .colse {
        cursor: pointer;
        width: 1.88rem;
        height: 1.88rem;

        > img {
          width: 100%;
          height: 100%;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }

    .body {
      padding: 2.5rem 0 5.44rem 0;
      text-align: center;
      font-size: 1.13rem;
      color: #333;
    }

    .footer {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      text-align: center;
      line-height: 2.56rem;

      .yes {
        width: 8.19rem;
        height: 2.56rem;
        background: rgba(0, 0, 0, 1);
        color: #fff;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        margin-right: 5.69rem;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }

      .no {
        width: 8.19rem;
        height: 2.56rem;
        background: rgba(255, 255, 255, 1);
        color: #333;
        font-size: 1.13rem;
        border: 0.06rem solid #333;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
